<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加新生</title>
  <style>
     .ok{
       color:greenyellow;
       /*content: '√';*/
     }
     .error{
       color:red;
       font-size:15px;
     }
  </style>
  <script src="/js/jquery-3.4.1.min.js"></script>
  <script>
    $(function(){
      $("#telephone").blur(function (){
        let that=this;
        //this:当前文本框
        let ph=$(this).val();
        if(ph==''){
          $(that).next().empty();
          return false;
        }

        $.get("/student/checkPhone",{phone:ph},function(data){
          if(data.code==0){
             //alert("手机号可以使用");
            $(that).next().html("手机号可以使用").removeClass().addClass("ok");
            $("#btnSave").attr("disabled",false);
            return true;
          }else{
           // alert("手机号已经被注册了");
            $(that).next().html("手机号已经被注册了").removeClass().addClass("error");
            $("#btnSave").attr("disabled",true);
            return false;
          }
        },"json");
      });
      //////////
      //check QQ

    });
  </script>
</head>
<body>
<form method="post" enctype="multipart/form-data"  action="/student/add">
  <fieldset>
    <legend>添加新生</legend>
    <p>
      <label>姓名</label>
      <input type="text" name="sname" required/>
    </p>
    <p>
      <label>手机号</label>
      <input type="text" name="telephone" id="telephone">
      <span id="phoneTip"></span>
    </p>
    <p>
      <label>QQ号</label>
      <input type="number" name="QQ">
    </p>
    <p>
      <label>所属年级</label>
      <select name="gradeid">
        <option th:each="g:${grades}" th:value="${g.id}" th:text="${g.gname}"></option>
      </select>
     </p>
    <p>
      <label>身份证照片</label>
      <input type="file" name="idcard"/>
    </p>
    <p>
      <input type="submit" value="保存" id="btnSave"/>
      <input type="reset" value="重填"/>
    </p>
  </fieldset>
</form>
</body>
</html>